<template>
	<view class="user-dynamic-info">
		<view class="product-info-navbar">
			<u-navbar
				:custom-back="back"
				title="用户详情"
				back-icon-size="40"
				back-icon-name="arrow-leftward"
				:back-icon-color="titleColor"
				title-size="32rpx"
				:title-color="titleColor"
				:background="background"
				:border-bottom="false">
			</u-navbar>
		</view>
		<view class="user-dynamic-info-bg">
			<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/my/icon34.png" mode="widthFix"></image>
		</view>
		<view class="user-dynamic-info-tags">
			<view class="labe-item" v-for="(data,index) in labeList" :key="index">{{data}}</view>
		</view>
		<view class="user-dynamic-info-user">
			<view class="user-dynamic-info-user-top">
				<image :src="userInfo.heard_img"></image>
				<view class="user-dynamic-info-user-top-userinfo">
					<view class="name">{{userInfo.nickname}}</view>
					<view class="wechat">微信：{{userInfo.phone?userInfo.phone:''}}</view>
					<view class="id">ID：{{userInfo.user_id?userInfo.user_id:''}}</view>
				</view>
				<view class="user-dynamic-info-user-top-btn">
					<view class="user-dynamic-info-user-top-btn-1" @click="makePhone(userInfo.phone)">拨打电话</view>
					<view class="user-dynamic-info-user-top-btn-2" @click="copyPhone(userInfo.phone)">复制微信</view>
				</view>
			</view>
			<view class="user-dynamic-info-user-bottom">
				<text class="last-login-time">上次登录时间：{{newDatas.last_login_time?newDatas.last_login_time:'无'}}</text>
				<text class="car" @click="userCar">购物车</text>
			</view>
			<view class="user-dynamic-info-remark" v-if="currentUserInfo.role_type==2 || currentUserInfo.role_type==3 || currentUserInfo.role_type==4 || currentUserInfo.role_type==11">
				<view class="label">跟进备注</view>
				<view class="btn" @click="addRemark">+新增</view>
			</view>
			<view class="remark-list">
				<view class="input-list" v-for="(data,index) in userInfo.remark" :key='index'>
					<view class="time-name">
						<view class="time">{{data.add_time}}</view>
						<view class="name">{{data.nickname}}</view>
					</view>
					<input placeholder="请输入备注" v-model="data.remark" :disabled="data.remark?true:false" confirm-type="done"/>
				</view>
			</view>
		</view>
		<view class="user-dynamic-info-goods">
			<view class="user-dynamic-info-tit">最喜欢的产品</view>
			<scroll-view scroll-x class="user-dynamic-info-goods-list" v-if="newDatas.goods_list.length">
				<view class="user-dynamic-info-goods-list-box">
					<view class="user-dynamic-info-goods-item" v-for="(data,index) in newDatas.goods_list" :key="index" @click="goodsInfo(data.goods_id)">
						<image :src="data.image"></image>
						<view class="goods-name">{{data.goods_name}}</view>
						<view class="goods-price"><text>￥</text>{{data.retail_price}}</view>
					</view>
				</view>
			</scroll-view>
			<pt-nothing text="暂无数据" bgColor="#FFF" v-else></pt-nothing>
		</view>
		<!-- <view class="user-dynamic-info-items">
			<view class="user-dynamic-info-tit">消费贡献</view>
			<view class="user-dynamic-info-items-list three">
				<view class="user-dynamic-info-items-data-item">
					<view class="label">累计消费金额</view>
					<view class="value">{{newDatas.consumption.consumption_price}}</view>
				</view>
				<view class="user-dynamic-info-items-data-item">
					<view class="label">累计消费次数</view>
					<view class="value">{{newDatas.consumption.consumption_count}}</view>
				</view>
				<view class="user-dynamic-info-items-data-item">
					<view class="label">累计消费件数</view>
					<view class="value">{{newDatas.consumption.consumption_num}}</view>
				</view>
				<view class="user-dynamic-info-items-data-item">
					<view class="label">上次消费时间</view>
					<view class="value">{{newDatas.consumption.pay_time}}</view>
				</view>
				<view class="user-dynamic-info-items-data-item">
					<view class="label">上次消费金额</view>
					<view class="value">{{newDatas.consumption.order_amount}}</view>
				</view>
				<view class="user-dynamic-info-items-data-item">
					<view class="label">距离上次消费</view>
					<view class="value" style="font-size: ;">{{newDatas.consumption.differ_day}}</view>
				</view>
				<view class="user-dynamic-info-items-data-item">
					<view class="label">平均客单价</view>
					<view class="value">{{newDatas.consumption.customer_price}}</view>
				</view>
				<view class="user-dynamic-info-items-data-item">
					<view class="label">平均客单件</view>
					<view class="value">{{newDatas.consumption.customer_num}}</view>
				</view>
			</view>
		</view> -->
		<view class="user-dynamic-info-items">
			<view class="user-dynamic-info-tit">商品偏好</view>
			<view class="user-dynamic-info-items-list two">
				<view class="user-dynamic-info-items-data-item">
					<view class="label">分类：</view>
					<view class="value">{{newDatas.consumption.class_name}}</view>
				</view>
				<view class="user-dynamic-info-items-data-item">
					<view class="label">风格</view>
					<view class="value">{{newDatas.consumption.style_name}}</view>
				</view>
			</view>
		</view>
		<view class="user-dynamic-info-items">
			<view class="user-dynamic-info-tit">推广数据</view>
			<view class="user-dynamic-info-items-list">
				<view class="user-dynamic-info-items-data-item">
					<view class="label">推广总数</view>
					<view class="value">{{newDatas.all_count}}</view>
				</view>
				<view class="user-dynamic-info-items-data-item">
					<view class="label">今日推广</view>
					<view class="value">{{newDatas.today_count}}</view>
				</view>
				<view class="user-dynamic-info-items-data-item">
					<view class="label">本周推广</view>
					<view class="value">{{newDatas.week_count}}</view>
				</view>
				<view class="user-dynamic-info-items-data-item">
					<view class="label">本月总数</view>
					<view class="value">{{newDatas.month_count}}</view>
				</view>
				<view class="user-dynamic-info-items-data-item">
					<view class="label">去年推广</view>
					<view class="value">{{newDatas.last_year_count}}</view>
				</view>
				<view class="user-dynamic-info-items-data-item">
					<view class="label">昨日推广</view>
					<view class="value">{{newDatas.yesterday_count}}</view>
				</view>
				<view class="user-dynamic-info-items-data-item">
					<view class="label">上周推广</view>
					<view class="value">{{newDatas.last_week_count}}</view>
				</view>
				<view class="user-dynamic-info-items-data-item">
					<view class="label">上月总数</view>
					<view class="value">{{newDatas.last_month_count}}</view>
				</view>
			</view>
		</view>
		<view class="user-dynamic-info-items">
			<view class="user-dynamic-info-tit">订单列表<text>(用户)</text></view>
			<view class="user-dynamic-info-items-list five">
				<view class="user-dynamic-info-items-data-item">
					<view class="label">未支付</view>
					<view class="value">{{newDatas.pay_count}}</view>
				</view>
				<view class="user-dynamic-info-items-data-item">
					<view class="label">待发货</view>
					<view class="value">{{newDatas.deliver_count}}</view>
				</view>
				<view class="user-dynamic-info-items-data-item">
					<view class="label">待收货</view>
					<view class="value">{{newDatas.send_count}}</view>
				</view>
				<view class="user-dynamic-info-items-data-item">
					<view class="label">已完成</view>
					<view class="value">{{newDatas.comment_count}}</view>
				</view>
				<view class="user-dynamic-info-items-data-item">
					<view class="label">已取消</view>
					<view class="value">{{newDatas.cancel_count}}</view>
				</view>
			</view>
		</view>
		<!-- <view class="user-dynamic-info-items" v-if="newDatas.role_type==2 || newDatas.role_type==3 || newDatas.role_type==4 || newDatas.role_type==11">
			<view class="user-dynamic-info-tit">成交金额<text>（业务员）</text></view>
			<view class="user-dynamic-info-items-list">
				<view class="user-dynamic-info-items-data-item">
					<view class="label">成交总业绩</view>
					<view class="value">{{newDatas.total_price}}</view>
				</view>
				<view class="user-dynamic-info-items-data-item">
					<view class="label">今日业绩</view>
					<view class="value">{{newDatas.today_price}}</view>
				</view>
				<view class="user-dynamic-info-items-data-item">
					<view class="label">本周业绩</view>
					<view class="value">{{newDatas.week_price}}</view>
				</view>
				<view class="user-dynamic-info-items-data-item">
					<view class="label">本月业绩</view>
					<view class="value">{{newDatas.month_price}}</view>
				</view>
				<view class="user-dynamic-info-items-data-item">
					<view class="label">去年总业绩</view>
					<view class="value">{{newDatas.last_year_price}}</view>
				</view>
				<view class="user-dynamic-info-items-data-item">
					<view class="label">昨日业绩</view>
					<view class="value">{{newDatas.yesterday_price}}</view>
				</view>
				<view class="user-dynamic-info-items-data-item">
					<view class="label">上周业绩</view>
					<view class="value">{{newDatas.last_week_price}}</view>
				</view>
				<view class="user-dynamic-info-items-data-item">
					<view class="label">上月业绩</view>
					<view class="value">{{newDatas.last_month_price}}</view>
				</view>
			</view>
		</view> -->
		<view class="user-dynamic-info-items">
			<view class="user-dynamic-info-tit">用户使用情况<text>(次数)</text></view>
			<view class="user-dynamic-info-items-list five">
				<block v-for="(data,index) in all_browse" :key="index">
					<view class="user-dynamic-info-items-data-item" v-if="!daat.hidden">
						<view class="label">{{data.name}}</view>
						<view class="value">{{data.value}}</view>
					</view>
				</block>
			</view>
		</view>
		<!-- <view class="user-dynamic-info-1">
			<image :src="userInfo.heard_img"></image>
			<view class="user-dynamic-info-1-box">
				<view class="user-dynamic-info-1-name">用户名：{{userInfo.nickname}}</view>
				<view class="user-dynamic-info-1-id">ID:{{user_id}}</view>
				<view class="user-dynamic-info-1-phone">联系方式：{{userInfo.phone}}</view>
			</view>
			<text class="phoneCall" @click="phoneCall">呼叫</text>
		</view>
		<view class="user-dynamic-datetype">
			<view v-for="(data,index) in dateType" :class="{active: dateIndex===index}" @click="selectDatetype(index)" :key="index">{{data.label}}</view>
		</view>
		<view class="user-dynamic-info-2">
			<view class="user-dynamic-info-2-tit">用户使用情况（次数）</view>
			<view class="user-dynamic-info-2-list">
				<view class="user-dynamic-info-2-item" v-for="(data,index) in all_browse" :key="index">
					<view>{{data.name}}</view>
					<text>{{data.value}}</text>
				</view>
			</view>
		</view> -->

		<u-modal v-model="showRemarkPop" title="跟进备注" :title-style="{paddingTop: '30rpx'}" :show-cancel-button="true" @confirm="setRemark">
			<view class="remark-pop">
				<input placeholder="请输入跟进备注" v-model="remark" />
			</view>
		</u-modal>
		<view>
			<view class="user-dynamic-info-3">
				<view class="tabs">
					<u-tabs :list="tabs" active-color="#141414" height="100" bar-width="50" font-size="28" :bold="true" inactive-color="#757575"
					 :is-scroll="false" :current="active" @change="change"></u-tabs>
				</view>
			</view>
			<!-- 用户动态 -->
			<view class="user-dynamic-info-list" v-if="active == 0">
				<view v-if="dynamicList.length" class="user-dynamic-item" v-for="(item,index) in dynamicList" :key="index">
					<view class="user-dynamic-item-tims"><text class="blue">{{item.foot_where}}</text>浏览次数：{{item.num}}次</view>
					<view class="user-dynamic-item-tit">
						<text v-if="item.type==1">小程序</text>
						<text v-if="item.type==2">APP</text>
						<text v-if="item.type==3">H5</text>
						<text v-if="item.type==4">PC</text>
						<text v-if="item.type==5">Ipad</text>
						<text v-if="item.type==6">后台系统</text>
						<text>{{item.add_time}}</text>
					</view>
				</view>
				<pt-nothing
					text="暂无数据" 
					:fixed="false" 
					v-if="noData.noData1" 
					icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png?v=1">
				</pt-nothing>
				
				<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" v-if="dynamicList.length > 3" />
			</view>
			<!-- 用户足迹 -->
			<view class="user-foot-info-list" v-else>
				<view v-if="footList.length" class="user-dynamic-item" v-for="(item,index) in footList" :key="index" @click="goProInfo(item)">
					<image :src="item.image_middle"></image>
					<view class="user-dynamic-item-info">
						<view class="title">{{item.goods_name}}</view>
						<view class="price">￥<text>{{item.retail_price}}</text></view>
						<view class="times">浏览次数:{{item.num}}次 <text>{{item.add_time}}</text></view>
					</view>
				</view>
				<pt-nothing
					text="暂无数据" 
					:fixed="false" 
					v-if="noData.noData2" 
					icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png?v=1">
				</pt-nothing>
				<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" v-if="footList.length > 3" />
			</view>
		</view>
		<pt-loading></pt-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showRemarkPop: false,
				titleColor: '#FFF',
				background: {
					backgroundColor: 'rgba(255,255,255,0)',
				},
				dateIndex: 0,
				dateType: [{
					label: '全部',
					value: ''
				},{
					label: '今天',
					value: 'today'
				},{
					label: '昨天',
					value: 'yestoday'
				},{
					label: '本周',
					value: 'week'
				},{
					label: '上周',
					value: 'lastweek'
				},{
					label: '本月',
					value: 'month'
				},{
					label: '上月',
					value: 'lastmonth'
				},{
					label: '今年',
					value: 'year'
				},{
					label: '去年',
					value: 'lastyear'
				}],
				noData: {
					noData1: false,
					noData2: false,
				},
				more: false,
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '我也是有底线的'
				},
				all_browse: [
					{
						name: '小程序',
						value: 0
					},
					{
						name: 'APP',
						value: 0,
						hidden: true
					},
					{
						name: 'WEB',
						value: 0
					},
					{
						name: '电脑端',
						value: 0,
						hidden: true
					},
					{
						name: 'Ipad',
						value: 0,
						hidden: true
					}
				],
				userInfo: {
					remark: [],
					nickname: '',
					heard_img: '',
					phone: ''
				},
				remark: '',
				user_id: '',
				page: {
					page1: 0,
					page2: 0
				},
				active: 0,
				tabs: [{
					name: '用户动态'
				}, {
					name: '用户足迹'
				}],
				dynamicList: [],
				footList: [],
				newDatas: {
					last_login_time: '',
					goods_list: [],
					all_count: 0,
					today_count: 0,
					week_count: 0,
					month_count: 0,
					last_year_count: 0,
					yesterday_count: 0,
					last_week_count: 0,
					last_month_count: 0,
					pay_count: 0,
					deliver_count: 0,
					send_count: 0,
					comment_count: 0,
					cancel_count: 0,
					total_price: 0,
					today_price: 0,
					week_price: 0,
					month_price: 0,
					last_year_price: 0,
					yesterday_price: 0,
					last_week_price: 0,
					last_month_price: 0,
					consumption: {
						consumption_price: 0,
						consumption_count: 0,
						consumption_num: 0,
						pay_time: 0,
						order_amount: 0,
						differ_day: 0,
						customer_price: 0,
						customer_num: 0,
						class_name: '无',
						style_name: '无'
					}
				},
				labeList: [],
				currentUserInfo: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')):'',
				isSubmit: false
			};
		},
		onPageScroll(e) {
			if (e.scrollTop > 100) {
				uni.setNavigationBarColor({
					frontColor: '#000000',
					backgroundColor: ''
				})
				this.titleColor = '#000'
				this.background.backgroundColor = 'rgba(255,255,255,1)'
			} else {
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: ''
				})
				this.titleColor = '#FFF'
				this.background.backgroundColor = 'rgba(255,255,255,0)'
			}
		},
		onLoad(options) {
			this.user_id = options.user_id
			this.active = options.type
		},
		onShow() {
			this.init(0)
			this.init(1)
			this.getUserInfo()
			this.getAllBrowse()
		},
		onReady() {
			setTimeout(() => {
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: '',
					animation: {
						duration: 400,
						timingFunc: 'easeIn'
					}
				})
			},200)
		},
		methods: {
			getUserItem(){
				this.$u.api.UserItem({user_id: this.userInfo.user_id}).then(res => {
					this.newDatas = res.datas
				}).then(() => {
					this.$u.api.GetUserLabelList({user_id: this.userInfo.user_id}).then(labelRes => {
						this.labeList = labelRes.datas
					})
				})
			},
			// 获取用户信息
			getUserInfo() {
				let data = {
					user_id: this.user_id
				}
				this.$u.apiWei.UserList(data).then(res => {
					if (res.datas[0]) {
						this.userInfo.nickname = res.datas[0].nickname
						this.userInfo.heard_img = res.datas[0].heard_img
						this.userInfo.phone = res.datas[0].phone
						this.userInfo.user_id = res.datas[0].user_id
						this.userInfo.remark = res.datas[0].remark
					}
				}).then(() => {
					this.getUserItem()
				})
			},
			// 获取用户足迹总次数
			getAllBrowse() {
				let data = {
					asc: 2,
					order_by: 'add_time',
					page: 0,
					// store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:'',
					user_id: this.user_id,
					is_all: 1
				}
				this.$u.apiWei.BrowseUserList(data).then(res => {
					if (res.datas.all_browse.length) {
						res.datas.all_browse.forEach(item => {
							switch (Number(item.type)) {
								case 1:
									this.all_browse[0].value = item.num
									break;
								case 2:
									this.all_browse[1].value = item.num
									break;
								case 3:
									this.all_browse[2].value = item.num
									break;
								case 4:
									this.all_browse[3].value = item.num
									break;
								case 5:
									this.all_browse[4].value = item.num
									break;
							}
						})
					}
				})
			},
			init(active) {
				if (active == 0) {
					let data = {
						asc: 2,
						order_by: 'add_time',
						page: this.page.page1,
						// store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:'',
						user_id: this.user_id,
						is_all: 1,
						// parent_id: JSON.parse(uni.getStorageSync('userInfo')).user_id,
						time: this.dateIndex?this.dateType[this.dateIndex].value:''
					}
					this.$u.apiWei.BrowseUserList(data).then(res => {
						if (res.datas.list.length) {
							res.datas.list.forEach(item => {
								this.dynamicList.push(item)
							})
							this.more = true
						} else {
							this.more = false
						}
						if (this.dynamicList.length == 0 && this.page.page1 == 0) this.noData.noData1 = true
					})
				} else {
					let BrowseListData = {
						asc: 2,
						order_by: 'add_time',
						page: this.page.page2,
						// store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:'',
						user_id: this.user_id,
						paramter: 1,
						// parent_id: JSON.parse(uni.getStorageSync('userInfo')).user_id,
						time: this.dateIndex?this.dateType[this.dateIndex].value:''
					}
					this.$u.apiWei.BrowseList(BrowseListData).then(res => {
						if (res.datas.list.length) {
							res.datas.list.forEach(item => {
								this.footList.push(item)
							})
							this.more = true
						} else {
							this.more = false
						}
						if (this.footList.length == 0 && this.page.page2 == 0) this.noData.noData2 = true
					})
				}
			},
			// 设置备注
			async setRemark(){
				if(this.isSubmit) return
				this.isSubmit = true
				const { datas } = await this.$u.api.UserRemark({
					user_id: this.user_id,
					remark: this.remark
				}).catch(() => {
					setTimeout(() => {
						this.isSubmit = false
					},2000)
				})
				setTimeout(() => {
					this.isSubmit = false
				},2000)
				this.getUserInfo()
			},
			// tab切换
			change(index) {
				this.active = index;
			},
			// 拨打电话
			phoneCall() {
				uni.makePhoneCall({
					phoneNumber: this.userInfo.phone
				});
			},
			goProInfo(data){
				if(data.is_house){
					if(data.is_house==1){
						uni.navigateTo({
							animationDuration: 500,
							url: '/pages/package/n98-info?group_id='+data.goods_id
						})
					}else{
						uni.navigateTo({
							animationDuration: 500,
							url: '/pages/package/house-info?group_id='+data.goods_id
						})
					}
				}else{
					if(data.store_goods_id){
						getApp().goProInfo(data.store_goods_id,true)
					}else{
						getApp().goProInfo(data.goods_id)
					}
				}
			},
			selectDatetype(index){
				this.dateIndex = index
				this.more = true
				this.dynamicList = []
				this.footList = []
				this.page = {
					page1: 0,
					page2: 0
				}
				this.init(this.active)
			},
			makePhone(phone){
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			copyPhone(phone){
				uni.setClipboardData({
					data: phone,
					success: () => {
						uni.showToast({
							icon: 'none',
							title: '复制成功'
						})
					}
				})
			},
			goodsInfo(goods_id){
				getApp().goProInfo(goods_id)
			},
			userCar(){
				uni.navigateTo({
					animationDuration: 500,
					url: '/my/user-dynamic/user-car?user_id='+this.userInfo.user_id
				})
			},
			back(){
				let pages = getCurrentPages()
				if(pages.length>1){
					uni.navigateBack()
				}else{
					// #ifdef MP-WEIXIN
					if(uni.getExtConfigSync().appid==='wx9f2da8a90bb750f7'){
						uni.switchTab({
							url: '/pages/merchant/merchant'
						})
					}else{
						uni.switchTab({
							url: '/pages/index/index'
						})
					}
					// #endif
					// #ifdef APP-PLUS || H5
					uni.switchTab({
						url: '/pages/index/index'
					})
					// #endif
				}
			},
			addRemark(){
				this.showRemarkPop = true
				console.log(this.showRemarkPop)
			}
		},
		onReachBottom() {
			this.status = 'loading';
			setTimeout(() => {
				this.status = 'nomore';
			}, 1000)
			if (!this.more) return;
			if (this.active == 0) this.page.page1++;
			if (this.active == 1) this.page.page2++;
			this.init(this.active)
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FAFAFC;
	}

	.user-dynamic-datetype{
		display: flex;
		align-items: center;
		padding: 30rpx 30rpx 0;
		view{
			flex: 1;
			font-size: 24rpx;
			text-align: center;
			height: 54rpx;
			line-height: 54rpx;
			background-color: #FFF;
			&:first-child{
				border-radius: 8rpx 0 0 8rpx;
			}
			&:last-child{
				border-radius: 0 8rpx 8rpx 0;
			}
			&.active{
				background-color: #141414;
				color: #FFF;
			}
		}
	}

	.user-dynamic-info {
		padding-top: 20rpx;
	}

	.user-dynamic-info-bg{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 0;
		image{
			width: 100%;
		}
	}

	.user-dynamic-info .user-dynamic-info-1 {
		background-color: #FFF;
		display: flex;
		align-items: center;
		padding: 30rpx 20rpx;
	}

	.user-dynamic-info .user-dynamic-info-1 image {
		width: 130rpx;
		height: 130rpx;
		border-radius: 100%;
		background-color: #EEE;
	}

	.user-dynamic-info .user-dynamic-info-1 .phoneCall {
		display: inline-block;
		color: #FFF;
		border: solid 1px #141414;
		font-size: 28rpx;
		padding: 5rpx 40rpx;
		border-radius: 8rpx;
		background-color: #141414;
	}

	.user-dynamic-info .user-dynamic-info-1 .user-dynamic-info-1-box {
		flex: 1;
		min-width: 0;
		margin-left: 20rpx;
	}

	.user-dynamic-info .user-dynamic-info-1 .user-dynamic-info-1-box .user-dynamic-info-1-name {
		font-size: 30rpx;
		color: #333;
	}

	.user-dynamic-info .user-dynamic-info-1 .user-dynamic-info-1-box .user-dynamic-info-1-id {
		font-size: 26rpx;
		color: #999;
		margin: 10rpx 0;
	}

	.user-dynamic-info .user-dynamic-info-1 .user-dynamic-info-1-box .user-dynamic-info-1-phone {
		font-size: 28rpx;
	}

	.user-dynamic-info .user-dynamic-info-2 {
		background-color: #FFF;
		margin-top: 20rpx;
		padding: 30rpx 20rpx;
		border-bottom: solid 1px #EEE;
	}

	.user-dynamic-info .user-dynamic-info-2 .user-dynamic-info-2-tit {
		font-size: 30rpx;
	}

	.user-dynamic-info .user-dynamic-info-2 .user-dynamic-info-2-list {
		display: flex;
		margin-top: 30rpx;
	}

	.user-dynamic-info .user-dynamic-info-2 .user-dynamic-info-2-list .user-dynamic-info-2-item {
		flex: 1;
		text-align: center;
	}

	.user-dynamic-info .user-dynamic-info-2 .user-dynamic-info-2-list .user-dynamic-info-2-item view {
		font-size: 24rpx;
		color: #999;
		text-transform: uppercase;
		margin-bottom: 20rpx;
	}

	.user-dynamic-info .user-dynamic-info-2 .user-dynamic-info-2-list .user-dynamic-info-2-item text {
		font-size: 28rpx;
		font-weight: bold;
	}

	.user-dynamic-info .user-dynamic-info-list,
	.user-dynamic-info .user-foot-info-list {
		margin-top: 20rpx;
	}

	.user-dynamic-info .user-dynamic-info-list .user-dynamic-item {
		position: relative;
		padding: 40rpx 20rpx;
		background-color: #FFF;
	}

	.user-dynamic-info .user-dynamic-info-list .user-dynamic-item::after {
		position: absolute;
		bottom: 0;
		left: 20rpx;
		right: 20rpx;
		height: 1px;
		content: "";
		background-color: #EEE;
	}
	
	.user-dynamic-info .user-dynamic-info-list .user-dynamic-item:last-child::after{
		display: none;
	}

	.user-dynamic-info .user-dynamic-info-list .user-dynamic-item .user-dynamic-item-tit {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
		font-size: 22rpx;
		align-items: center;
	}

	.user-dynamic-info .user-dynamic-info-list .user-dynamic-item .user-dynamic-item-tit text:last-child {
		color: #141414;
		font-weight: bold;
		font-size: 22rpx;
	}

	.user-dynamic-info .user-dynamic-info-list .user-dynamic-item .user-dynamic-item-tims {
		margin-bottom: 10rpx;
		font-size: 26rpx;
		color: #666;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.user-dynamic-info .user-dynamic-info-list .user-dynamic-item .user-dynamic-item-tims .blue {
		color: #F59359;
		font-weight: bold;
	}

	.user-dynamic-info .user-foot-info-list .user-dynamic-item {
		padding: 20rpx;
		background-color: #FFF;
		display: flex;
		display: flex;
	}

	.user-dynamic-info .user-foot-info-list .user-dynamic-item image {
		width: 250rpx;
		height: 250rpx;
		border: solid 1px #EEE;
	}

	.user-dynamic-info .user-foot-info-list .user-dynamic-item .user-dynamic-item-info {
		flex: 1;
		min-width: 0;
		position: relative;
		height: 250rpx;
		margin-left: 20rpx;
		position: relative;
	}

	.user-dynamic-info .user-foot-info-list .user-dynamic-item .user-dynamic-item-info view {
		display: block;
	}

	.user-dynamic-info .user-foot-info-list .user-dynamic-item .user-dynamic-item-info view.title {
		height: 120rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 28rpx;
	}

	.user-dynamic-info .user-foot-info-list .user-dynamic-item .user-dynamic-item-info view.price {
		font-size: 20rpx;
	}

	.user-dynamic-info .user-foot-info-list .user-dynamic-item .user-dynamic-item-info view.price text {
		font-size: 28rpx;
		color: #333;
	}

	.user-dynamic-info .user-foot-info-list .user-dynamic-item .user-dynamic-item-info view.times {
		position: absolute;
		bottom: 10rpx;
		left: 0;
		right: 0;
		font-size: 22rpx;
		color: #666;
		margin-top: 10rpx;
		display: flex;
		justify-content: space-between;
	}

	.tabs {
		background-color: #FFF;
		margin-top: 30rpx;
	}

	.tab__item {
		flex: 1;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
	}

	.tab__item text {
		display: inline-block;
		padding: 0 30rpx;
		height: 90rpx;
		color: #999;
		font-size: 24rpx;
	}

	.tab__item.active text {
		font-size: 28rpx;
		color: #333;
		height: 84rpx;
		line-height: 84rpx;
		border-bottom: solid 6rpx #fe9b26;
	}
	.user-dynamic-info-tags{
		height: 180rpx;
		display: flex;
		flex-wrap: wrap;
		padding: 0 30rpx;
		position: relative;
		z-index: 2;
		.labe-item{
			height: 55rpx;
			line-height: 55rpx;
			display: inline-block;
			color: #FFF;
			background-color: rgba(255,255,255,.1);
			font-size: 24rpx;
			border-radius: 52px;
			margin-right: 20rpx;
			padding: 0 30rpx;
			&:nth-child(2),
			&:nth-child(4),
			&:nth-child(6){
				background-image: linear-gradient(97deg, #F59359, rgba(245, 147, 89, 0.4));
			}
		}
	}
	.user-dynamic-info-user{
		background-color: #FFF;
		margin: 0 30rpx;
		border-radius: 8rpx;
		position: relative;
		z-index: 2;
		.user-dynamic-info-user-top{
			display: flex;
			padding: 40rpx 30rpx;
			align-items: center;
			image{
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}
			.user-dynamic-info-user-top-userinfo{
				margin: 0 30rpx;
				flex: 1;
				min-width: 0;
				.name{
					font-weight: bold;
					color: #141414;
					font-size: 32rpx;
				}
				.wechat,.id{
					font-size: 24rpx;
					color: #808080;
					margin-top: 10rpx;
				}
			}
			.user-dynamic-info-user-top-btn{
				.user-dynamic-info-user-top-btn-1{
					width: 125rpx;
					text-align: center;
					line-height: 52rpx;
					border: 1px solid #E6E6E6;
					border-radius: 8rpx;
					color: #4D4D4D;
					font-size: 24rpx;
				}
				.user-dynamic-info-user-top-btn-2{
					width: 125rpx;
					text-align: center;
					line-height: 52rpx;
					border: 1px solid #F59359;
					border-radius: 8rpx;
					color: #FFF;
					background-color: #F59359;
					font-size: 24rpx;
					margin-top: 20rpx;
				}
			}
		}
		.user-dynamic-info-user-bottom{
			padding: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-top: solid 1px #F2F2F2;
			.last-login-time{
				font-size: 24rpx;
				color: #808080;
			}
			.car{
				width: 125rpx;
				text-align: center;
				line-height: 52rpx;
				border: 1px solid #F59359;
				border-radius: 8rpx;
				color: #F59359;
				font-size: 24rpx;
			}
		}
		.user-dynamic-info-remark{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx 30rpx;
			.label{
				font-size: 24rpx;
			}
			.btn{
				border-radius: 8rpx;
				padding: 10rpx 20rpx;
				background-color: #F59359;
				color: #FFF;
				font-size: 24rpx;
			}
		}
		.remark-list{
			.input-list{
				padding: 0 0 30rpx;
				.time-name{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 30rpx 10rpx;
					font-size: 24rpx;
					.time{
						color: red;
					}
					.name{
						font-weight: bold;
					}
				}
				input{
					font-size: 24rpx;
					padding: 10rpx 30rpx;
				}
			}
		}
	}
	.user-dynamic-info-goods{
		margin: 30rpx 30rpx 0;
		background-color: #FFF;
		padding: 30rpx;
		position: relative;
		z-index: 2;
		.user-dynamic-info-goods-list{
			.user-dynamic-info-goods-list-box{
				white-space: nowrap;
				.user-dynamic-info-goods-item{
					display: inline-block;
					text-align: center;
					width: 190rpx;
					margin-right: 25rpx;
					margin-top: 30rpx;
					image{
						width: 190rpx;
						height: 190rpx;
						border-radius: 8rpx;
						background-color: #EEE;
					}
					.goods-name{
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						font-size: 24rpx;
						color: #28221F;
						margin: 10rpx 0;
					}
					.goods-price{
						color: #F59359;
						font-size: 28rpx;
						text{
							font-size: 22rpx;
						}
					}
				}
			}
		}
	}
	.user-dynamic-info-tit{
		font-weight: bold;
		color: #141414;
		font-size: 32rpx;
		border-bottom: solid 1px #EEE;
		padding-bottom: 30rpx;
		text{
			font-size: 24rpx;
			color: #4D4D4D;
			margin-left: 10rpx;
			font-weight: 100;
		}
	}
	.user-dynamic-info-items{
		margin: 30rpx 30rpx 0;
		background-color: #FFF;
		padding: 30rpx;
		.user-dynamic-info-items-list{
			display: flex;
			flex-wrap: wrap;
			&.five{
				.user-dynamic-info-items-data-item{
					width: 20%;
				}
			}
			&.two{
				.user-dynamic-info-items-data-item{
					width: 50%;
				}
			}
			&.three{
				.user-dynamic-info-items-data-item{
					width: 33.3333%;
				}
			}
			.user-dynamic-info-items-data-item{
				margin-top: 30rpx;
				width: 25%;
				text-align: center;
				.label{
					color: #808080;
					font-size: 24rpx;
				}
				.value{
					font-size: 36rpx;
					font-weight: bold;
					color: #333;
					margin-top: 10rpx;
				}
				&:first-child .value{
					color: #F59359;
				}
			}
		}
	}
	.remark-pop{
		padding: 30rpx;
		input{
			
		}
	}
</style>
